<template>
  <div class="about">
    <!-- 文章标题 -->
    <AboutTop :pageData="pageData" />
    <!-- 评论 -->
    <AboutComment :comment="comment" />
    <!-- 推荐阅读列表组件 -->
    <MesboardList :list="articleList" />
    <!-- 底部  -->
    <Footer />
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Footer from "@/components/Footer";
import MesboardList from "@/components/mesboard/MesboardList";
import AboutTop from "../../../components/About/AboutTop.vue";
import AboutComment from "../../../components/About/AboutComment.vue";
export default {
  data() {
    return {
      desc: "",
      expression: false,
    };
  },
  components: {
    AboutTop,
    MesboardList,
    Footer,
    AboutComment,
  },
  methods: {
    ...mapActions({
      getComment: "about/getComment",
    }),
    //鼠标划入 表情高亮
    remove() {
      this.expression = true;
    },
    //鼠标划出 表情失去高亮
    remout() {
      this.expression = false;
    },
  },
  created() {
    this.getComment();
  },
  computed: {
    ...mapState({
      articleList: (state) => state.article.articleList,
      pageData: (state) => state.about.pageData,
      comment: (state) => state.about.comment,
    }),
  },
};
</script>

<style lang="scss" scoped>
.about {
  width: 100%;
  height: 100%;
}
</style>
